<template>
  <div>
    <Card :bordered="false">
      <p slot="title">自动编号设置</p>
      <!-- <span slot="extra">* 为必填项</span> -->
      <h4>使用范围</h4>

      <div class="num-input-wrapper">
        <span>
          <span class="require">*</span> 项目编号前缀
        </span>
        <Input disabled v-model="projectPrefix" />
      </div>
      <div class="num-title-wrapper">
        <h4>编码规则设计</h4>
        <Button @click="handleAddRuleClick" type="primary">新增规则</Button>
      </div>

      <Table :columns="columnsData" :data="rules" border stripe>
        <template slot="action" slot-scope="{ row, index }">
          <Button
            @click="handleEidtClick(row)"
            size="small"
            style="margin-right: 5px"
            type="primary"
          >编辑</Button>
          <Button @click="handleDelClick(row.id)" size="small" type="error">删除</Button>
        </template>
      </Table>

      <Modal
        :title="modalEditId? '编辑规则': '新增规则'"
        @on-cancel="handleCancelClick"
        @on-ok="handleOkClick"
        v-model="ruleModalVisiable"
      >
        <Form :label-width="80" :model="form" :rules="formRules" ref="ruleForm">
          <FormItem label="层级" prop="levelNameId">
            <Select
              :disabled="!!modalEditId"
              @on-change="handleResetModelLoading"
              placeholder="请选择层级"
              v-model="form.levelNameId"
            >
              <Option :key="item.id" :value="item.id" v-for="item in levelList">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="前缀" prop="useprefix">
            <Select
              placeholder="无/字母前缀"
              v-model="form.useprefix"
            >
              <Option :value="0">无</Option>
              <Option :value="1">使用前缀</Option>
            </Select>
          </FormItem>
          <FormItem label="数字位数" prop="length">
            <InputNumber
              placeholder="填写数字位数"
              v-model="form.length"
              :disabled = disabledInput
            />
          </FormItem>
          <FormItem label="数字起点1" prop="start">
            <InputNumber
              placeholder="填写数字起点"
              :disabled = disabledInput
              v-model="form.start"
            />
          </FormItem>
        </Form>
      </Modal>
    </Card>
  </div>
</template>
<script>
import {
  getCodeRuleData,
  allLevelName,
  codeRuleDel,
  codeRuleAdd,
  codeRuleEdit
} from '@/api/custome-num';

export default {
  data () {
    return {
      projectPrefix: '',
      columnsData: [
        { title: '编号', align: 'center', key: 'id' },
        { title: '层级名称', align: 'center', key: 'levelName' },
        { title: '前缀', align: 'center', key: 'useprefixText' },
        { title: '数字位数', align: 'center', key: 'length' },
        { title: '起点', align: 'center', key: 'start' },
        { title: '示例展示', align: 'left', key: 'example' },
        { title: '操作', align: 'center', width: 150, slot: 'action' }
      ],
      rules: [],
      levelList: [],

      modelOkLoad: '',
      disabledInput: false,
      ruleModalVisiable: false,
      modalEditId: '',
      form: {
        levelNameId: '',
        useprefix: '',
        length: 0,
        start: 0
      },
      formRules: {
        levelNameId: [{ required: true, message: '请选择层级' }],
        useprefix: [{ required: true, message: '请选择是否使用字母前缀' }],
        length: [
          { required: true, message: '请填写数字位数' },
          { type: 'number', message: '数字位数必须位数字' }
        ],
        start: [
          { required: true, message: '请填写数字起点' },
          { type: 'number', message: '数字起点必须位数字' }
        ]
      }
    };
  },
  mounted () {
    this.getRules();
    this.getRulesLevel();
  },
  methods: {
    async getRulesLevel () {
      const resp = await allLevelName();
      this.levelList = resp.data.data;
    },

    async getRules () {
      const resp = await getCodeRuleData();
      const res = resp.data.data;

      this.projectPrefix = res.projectPrefix;
      this.rules = res.rules;

      this.rules.forEach(el => {
        el.useprefixText = el.useprefix == 1 ? '使用前缀' : '无';
      });
    },

    handleEidtClick (row) {
      console.log('row', row);
      this.modalEditId = row.id;
      this.form.levelNameId = row.levelNameId;
      this.form.useprefix = row.useprefix;
      this.form.length = row.length;
      this.form.start = row.start;
      this.ruleModalVisiable = true;
      if (row.levelName == '合同段') {
        this.disabledInput = true;
      } else {
        this.disabledInput = false;
      }
    },

    handleDelClick (id) {
      this.$Modal.confirm({
        title: '确认删除？',
        content: '<p>数据删除后不可恢复，请确认是否删除数据？</p>',
        loading: true,
        onOk: async () => {
          await codeRuleDel({ id });
          this.getRules();
          this.$Modal.remove();
        }
      });
    },
    handleResetModelLoading (e) {
      console.log('e', e);
      if (e === 2) {
        this.disabledInput = true;
      } else {
        this.disabledInput = false;
      }

      // this.modelOkLoad = false;

      // this.$nextTick(() => {
      //   this.modelOkLoad = true;
      // });
    },
    handleCancelClick () {
      this.$refs.ruleForm.resetFields();
      this.modalLoading = true;
      this.modalEditId = '';
    },
    handleOkClick () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const data = {
            ...this.form
          };

          if (this.modalEditId) {
            data.id = this.modalEditId;
            await codeRuleEdit(data);
          } else {
            await codeRuleAdd(data);
          }

          this.getRules();
          this.ruleModalVisiable = false;
          this.handleCancelClick();
        }
      });
    },
    handleAddRuleClick () {
      this.ruleModalVisiable = true;
    }
  }
};
</script>
<style lang="less" scoped>
.num-input-wrapper {
  display: flex;
  align-items: center;
  margin: 10px 0;
  span {
    width: 120px;
    .require {
      color: #ed4014;
    }
  }
  /deep/ .ivu-input {
    width: 300px;
  }
}
.num-title-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  h4 {
    margin-right: 15px;
  }
}
/deep/ .ivu-modal-body {
  padding-right: 60px;
}
.ivu-input-number{
  width: 100%;
}
</style>
